<style>
    table {
        /* padding: 0px; */
        border: black 1px solid;
        background-color: lightblue;
        border-spacing: 0px;
    }
    tr,td{
        border: black 1px solid;
        padding: 8px 16px;
        text-align: left;
    }
    thead{
        font-weight: 1000;
        background-color: chartreuse;
    }
</style>




<div id="app">

    <div v-if='books.length>0'>
        <table>
            <thead>
                <td></td>
                <td>商品名</td>
                <td>加入日期</td>
                <td>价格</td>
                <td>数量</td>
                <td>操作</td>
            </thead>
            <tbody>
                <tr v-for='(o,index) in books'>
                    <td>{{index+1}}</td>
                    <td>{{o.name}}</td>
                    <td>{{o.date}}</td>
                    <td>{{o.price | num }}</td>
                    <td>
                        <button @click='decrease(o)' :disabled='o.count <=1'>-</button>
                        {{o.count}}
                        <button @click='increase(o)'>+</button>
                    </td>
                    <td><button @click='remove(index)'>移除</button> </td>

                </tr>
            </tbody>
        </table>
        <div>
            <h3>总数为：{{sum}}</h3>
        </div>
    </div>
    <div v-else>
        购物车为空~~~~~~
    </div>
</div>



<script src="../../js/vue.js"></script>

<script>
    let app = new Vue({
        el: '#app',
        data: {

            books: [{
                name: '《黄飞鸿》',
                date: '2019-02-04',
                price: 45.99,
                count: 1
            }, {
                name: '《黄飞鸿1》',
                date: '2019-02-04',
                price: 41.99,
                count: 1
            }, {
                name: '《黄飞鸿2》',
                date: '2019-02-04',
                price: 42.99,
                count: 1
            }, {
                name: '《黄飞鸿3》',
                date: '2019-02-04',
                price: 43.99,
                count: 1
            }, {
                name: '《黄飞鸿4》',
                date: '2019-02-04',
                price: 44.99,
                count: 1
            }]

        },
        methods: {
            decrease(object) {
                object.count--;
            },
            increase(object) {
                object.count++;
            },
            remove(index) {
                this.books.splice(index, 1);
            }
        },
        computed: {
            sum() {
                let b = this.books;
                let count = 0;
                for (let i = 0; i < b.length; i++) {
                    count += b[i].count * b[i].price;
                }
                return count.toFixed(2);
            }
        },
        filters: {
            num(number) {
                return number.toFixed(2);
            }
        }
    });
</script>